<template>
    <div class="header-box" >
            <div >
                 <img :src="user_info.get_user().head_image || '/public/yonghu.png'"  class="head-image"  alt="">
            </div>
            <div> 
                <div>
                    <p>{{user_info.get_user().username}}</p>
                </div>
                <div>
                     <span>Id: {{user_info.get_user().id }}</span><a-divider direction="vertical" />
                    <span>性别:{{user_info.get_user().sex || "保密"}}</span><a-divider direction="vertical" />
                    <span>年龄:{{user_info.get_user().age || "保密"}}</span><a-divider direction="vertical" />
                    <span>邮箱:{{user_info.get_user().email || "未设置"}}</span>
                </div>
                <div style="text-align: left;">
                    个人简介:{{user_info.get_user().introduction || "这个人很懒,什么都没有留下"}}
                </div>

                <div>
                    这是基本信息栏
                </div>
            </div>
            <div>
                   <div>
                    <span>  <a-button type="outline" shape="round" @click="funcgoto('fix_myinfo')">修改信息</a-button></span>
                    <span>  <a-button type="outline" shape="round" @click="funcgoto('mytext')">管理博文</a-button></span>
                    <span>  <a-button type="outline" shape="round" @click="funcgoto('fix_style')">设置</a-button></span>
                   </div>
                   <div>2</div>
            </div>

    </div>
</template>

<script setup>
import { onMounted, ref, watch,defineProps ,inject} from "vue";
import { useRouter } from "vue-router";
const props = defineProps({
    user_info: {
        type: Object,
        required: true,
        default: () => { }
    }
})
let Router = useRouter()
let show_global_button = inject('global_button')

const funcgoto = function (section) { 
    if (section === "mytext") {
        const route = Router.resolve({ name: `community_delivery`, query: {redirect:section} });
        window.open(route.href, '_blank');
        return 
    }
    if (show_global_button.value) {
        Router.push({ name: `${section}` });
        return
    } else {
        const route = Router.resolve({ name: `${section}` });
        window.open(route.href, '_blank');
    }
}
onMounted(() => { 
            console.log(props.user_info)
        // show_global_button.value = Number(localStorage.getItem("show_global_button"))
})



</script>

<style  scoped>
*{
    user-select: none;
}
.header-box{
    display:flex;
    justify-content: space-around;
    margin: 0 100px 20px 100px;
    background-size: cover;
    background-origin: border-box; 
    background-clip: border-box;  
    box-sizing: border-box;      
}
.header-box>div{
    display: inline-block;
    vertical-align: top;
    background-color: transparent;
    /* color:white; */
}
.header-box>div{
    margin-top: 200px;
    text-align: center;
    height: 300px;
}
.header-box>div:nth-child(1){
   width: 200px;
}
.header-box>div:nth-child(1)>img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.header-box>div:nth-child(2){
    width: 1000px;
    /* 信息栏 */
}
.header-box>div:nth-child(2)>div{
    margin-bottom: 20px;
}

.header-box>div:nth-child(2)>div:nth-child(1){
    font-size:23px;
    font-weight: 600;
    text-align: left;
   
}
.header-box>div:nth-child(2)>div:nth-child(2){
    text-align: left;
    display: flex;
}
.header-box>div:nth-child(2)>div:nth-child(2)>span{
   margin: 0 20px 0 0;
   font-size: 16px;
   width: 100px;
}
.header-box>div:nth-child(2)>div:nth-child(2)>span:nth-child(7){
   margin: 0 20px 0 0;
   font-size: 16px;
   width: 300px;
}
.header-box>div:nth-child(2)>div:nth-child(4){
    text-align: left;
    font-size: 18px;
    line-height: 18px;
}



.header-box>div:nth-child(3){
    width: 300px;
    /* 处理为功能面板 */
    text-align: right;
}

.header-box>div:nth-child(3)>div:nth-child(1){
    height: 100px;
    width: 300px;
}
.header-box>div:nth-child(3)>div:nth-child(1)>span{
    margin: 3px;
}
.header-box>div:nth-child(3)>div:nth-child(2){
    height: 200px;
}


</style>